<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user-info" @click="goLogin" v-if="!isLogin">
			<image src="/static/images/avatar-default.png" class="avatar"></image>
			<text class="login-tip">点击登录</text>
		</view>
		
		<view class="user-info" v-else>
			<image :src="userInfo.avatarUrl" class="avatar"></image>
			<text class="nickname">{{userInfo.nickName}}</text>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-list">
			<view class="menu-item" @click="goOrders">
				<uni-icons type="list" size="24" color="#666"></uni-icons>
				<text>我的订单</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			
			<view class="menu-item" @click="goAddress">
				<uni-icons type="location" size="24" color="#666"></uni-icons>
				<text>收货地址</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			
			<view class="menu-item" @click="goManage" v-if="isAdmin">
				<uni-icons type="shop" size="24" color="#666"></uni-icons>
				<text>商品管理</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>
		
		<!-- 退出登录 -->
		<view class="logout" v-if="isLogin" @click="handleLogout">
			<button type="default">退出登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 用户信息
const userInfo = ref({})
const isLogin = computed(() => !!uni.getStorageSync('token'))
const isAdmin = computed(() => userInfo.value.role === 'admin')

// 获取用户信息
const getUserInfo = () => {
	const info = uni.getStorageSync('userInfo')
	if (info) {
		userInfo.value = info
	}
}

// 跳转登录
const goLogin = () => {
	if (!isLogin.value) {
		uni.navigateTo({
			url: '/pages/user/login'
		})
	}
}

// 跳转订单列表
const goOrders = () => {
	if (!isLogin.value) return goLogin()
	uni.navigateTo({
		url: '/pages/order/list'
	})
}

// 跳转地址管理
const goAddress = () => {
	if (!isLogin.value) return goLogin()
	uni.navigateTo({
		url: '/pages/address/list'
	})
}

// 跳转商品管理
const goManage = () => {
	if (!isLogin.value) return goLogin()
	uni.navigateTo({
		url: '/pages/goods/manage'
	})
}

// 退出登录
const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				uni.clearStorageSync()
				userInfo.value = {}
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				})
			}
		}
	})
}

onShow(() => {
	getUserInfo()
})
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: #f7f8fa;
}

.user-info {
	height: 300rpx;
	background: #ff6b81;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-bottom: 20rpx;
		border: 4rpx solid rgba(255,255,255,0.2);
	}
	
	.nickname {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}
	
	.login-tip {
		font-size: 32rpx;
		color: #fff;
	}
}

.menu-list {
	margin-top: 20rpx;
	background: #fff;
	
	.menu-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		
		text {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			margin-left: 20rpx;
		}
		
		&:active {
			background: #f9f9f9;
		}
	}
}

.logout {
	margin-top: 40rpx;
	padding: 0 30rpx;
	
	button {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #666;
	}
}
</style> 